<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">

               <script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: Euclids Algorithm</h1>

            <script id='init' type='text/x-cindyscript'>


        rast=true;


        </script>

        <script id='csmove' type='text/x-cindyscript'>
            linecolor((0,0,0));
            sq(a,b):=(
                      n1=a-b;
                      n2=(-n1_2,n1_1);
                      pol=(a,a-n2,b-n2,b);
                    fillpoly(pol,color->col*.2+.8*(1,1,1),alpha->1);
                      draw(a,b,size->2);
                      draw(a,a-n2,size->2);
                      draw(b,b-n2,size->2);
                      draw(a-n2,b-n2,size->2);
                      );


            i=0;

            ii=complex((0,1));
            arrow(aa,bb):=(
                           a1=complex(aa);
                           b1=complex(bb);
                           draw(gauss(a1),gauss(b1),color->(0,0,0.6));
                           draw(gauss(b1-((b1-a1)/|b1-a1|)*exp(ii*.4) ),gauss(b1),color->(0,0,0.6));
                           draw(gauss(b1-((b1-a1)/|b1-a1|)*exp(-ii*.4) ),gauss(b1),color->(0,0,0.6));

                           );



            kb(a,b,c,n):=if(n>0,
                            col=hue(.3*n/2);
                            if(abs(a-b)<abs(a-c),
                               (sq(b,a);nn=perp(a-b);kb(a+nn,b+nn,c,n-1)),
                               (sq(a,c);nn=perp(a-c);kb(a-nn,b,c-nn,n-1))
                               ));


            nn=2.5;

              a=(A.x+10)*nn;
              b=(A.y+10)*nn;
              if(rast,a=round(a);b=round(b));
              if (a<0,a=0);
              if (b<0,b=0);
            A.xy=(a/nn-10,b/nn-10);

            if(mover()==B,
              a=(A.x+10)*nn;
              b=(B.y+10)*nn;
              if(rast,a=round(a);b=round(b));
              if (a<0,a=0);
              if (b<0,b=0);
              B.xy=(-10,b/nn-10);
              A.xy=(a/nn-10,b/nn-10);

            );




            if(mover()==C,
              a=(C.x+10)*nn;
              b=(A.y+10)*nn;
              if(rast,a=round(a);b=round(b));
              if (a<0,a=0);
              if (b<0,b=0);
              C.xy=(a/nn-10,-10);
              A.xy=(a/nn-10,b/nn-10);

            );

            B.xy=(-10,b/nn-10);
            C.xy=(a/nn-10,-10);
            aa=a;
            bb=b;

            drawtext(A+(.2,.2),"("+format(a,2)+","+format(b,2)+")");
            gsave();
            translate((-10,-10));
            scale(1/nn);
            apply(0..nn*20,
                  draw((0,#),(nn*20,#),color->(0,0,0),alpha->0.2);
                  draw((#,0),(#,nn*20),color->(0,0,0),alpha->0.2);

                  );
            kb((0,0),(0,b),(a,0),250);
            grestore();
            gsave();
            translate((-10,-10));
            scale(1/5);

            translate((40,40));
            drawtext((65,50-i*4),"Kettenbruch Darstellung:",size->20,color->(0.6,0,0));


//******************************************
x=aa/bb;
i=1;
kb=[];
while(!(|(round(x)-x)|<0.00000001) & i<10,
  k=floor(x);
  r=x-k;
  x=1/r;
  i=i+1;
  kb=kb++[k];
);

  k=round(x);
  r=x-k;

  pk=""+k;
  kb=kb++[k];
kn=length(kb);

taa=format(aa,2);
tbb=format(bb,2);
tbr=format(aa/bb,7);
if(length(tbr)>5,tbr=tbr+"\\ldots");
t="$";
t=t+"\\begin{array}{l}";
t=t+"\\\\[0mm]";
t=t+"{"+taa+"\\over"+tbb+"}="+tbr+"=";
t=t+"\\\\";
apply(1..(kn-1),i,

  t=t+"{"+kb_i+"+{1\\over ";
);
if(kn==10,
  t=t+kb_kn+"+\\cdots",
  t=t+kb_kn
);
apply(1..(kn-1)*2,t=t+"}");
t=t+"\\end{array}";

t=t+"$";
//drawtext((45,25),t,size->20,color->(0.6,0,0));
            javascript("renderEq('"+t+"')");



            grestore();

        </script>


        <div  id="CSCanvas" style="width:800px; height:500px; border:2px solid #000000"></div>

        <div style="position:absolute; top:200px; left:570px; display:inline;z-index:4">
         <div id="tex" style="font-size: 140%;" ></div>
</div>
 <div style="position:absolute; top:630px;left:10px">

        <input id="ch1" onclick="check()" checked type="checkbox" >einrasten
        </div>



 <script type="text/javascript">

           var check=function(){
              var ch1=document.getElementById("ch1");
             if(document.getElementById("ch1").checked){
                cdy.evokeCS('rast=true;repaint();');
             } else {
                 cdy.evokeCS('rast=false;repaint();');

             }

          }


        var renderEq=function(a){
        console.log(a);
        var latex=a;
        document.getElementById('tex').innerHTML=latex;
        MathJax.Hub.Queue(['Typeset',MathJax.Hub,'tex']);

        }
        </script>

        <script type="text/javascript">

            var gslp=[
                      {name:"A", kind:"P", type:"Free", pos:[4,8,1],size:4,color:[0,0,0]},
                      {name:"B", kind:"P", type:"Free", pos:[-10,8,1],size:4,color:[0,0,0]},
                      {name:"C", kind:"P", type:"Free", pos:[4,-10,1],size:4,color:[0,0,0]}
                      ];

            var cdy = CindyJS({canvasname:"CSCanvas",
                        movescript:"csmove",
                        initscript:"init",

                        geometry:gslp});





            </script>


	</body>
</html>
